<template>
    <div class="login">
        <div class="login_panel">
            <el-form ref="form" :model="form" :rules="rules" @submit.native="login" :status-icon="true"
                     :show-message="false" class="login_form">
                <!--<input name="username" type="text" style="display:none;"/>
                <input name="password" type="password" style="display:none;"/>-->
                <div class="login_logo text_center">
                    <img style="height: 50px;" src="~@/assets/logo.png" alt="logo">
                </div>
                <h1 class="login_title text_center">{{ $t('pageTitle.adminSystem') }}</h1>
                <el-form-item prop="account">
                    <el-input v-model="form.account" :autofocus="true" class="login_account"
                              :placeholder="$t('common.account')">
                        <i class="login_account_icon" slot="prefix"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" class="login_account" type="password"
                              :placeholder="$t('common.password')">
                        <i class="login_password_icon" slot="prefix"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="imageCode">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-input v-model="form.imageCode" class="login_account"
                              :placeholder="$t('common.verificationCode')">
                    </el-input>
                    </el-col>
                    <el-col :span="12">
                      <img class="imageCode" :src="imageCodeUrl" @click="changeImgCode" alt="">
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button native-type="submit" class="login_btn" type="primary">{{ $t('pageTitle.login') }}
                    </el-button>
                </el-form-item>
                <div class="language-switch">
                    <span @click="switchLanguage('zh')" :class="{'current': $i18n.locale === 'zhCN'}">{{ $t('common.chinese') }}</span>
                    <span @click="switchLanguage('en')" :class="{'current': $i18n.locale === 'en'}">{{ $t('common.english') }}</span>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import auth from '@/service/auth';
    import MD5 from 'blueimp-md5';
    import menuData from '@/config/menu';
    import { apiConf } from '@/config';

    export default {
        name: 'login',
        data() {
            return {
                form: {
                    account: '',
                    password: '',
                    imageCode: '',
                    codekey: ''
                },
                rules: {
                    account: [
                        {required: true, message: this.$t('verify.plsInputAccount')}
                    ],
                    password: [
                        {required: true, message: this.$t('verify.plsInputPassword')}
                    ],
                    imageCode: [
                        {required: true, message: this.$t('verify.plsInputImgCode')}
                    ]
                },
                menu: [],
                imageCodeUrl: ''
            };
        },
        methods: {
            login(e) {
                e.preventDefault();
                this.form.account = this.form.account.trim();
                this.form.password = this.form.password.trim();
                this.form.imageCode = this.form.imageCode.trim();
                this.$refs.form.validate((val) => {
                    if (val) {
                        const params = {
                            username: this.form.account,
                            password: MD5(this.form.password),
                            codekey: this.form.codekey,
                            imageCode: this.form.imageCode
                        };
                        auth.login(params).then(() => {
                            this.$message.success('Hello, ' + this.form.account);
                            this.getResourceList();
                            this.$store.dispatch('getUserAuthority');
                            this.$storage.set('callIsCalling',false);
                            this.$storage.set('callCallCid','');
                            this.$storage.set('callIsConnected',false);
                            this.$storage.set('callRecordpath','');
                            
                        }).catch(msg => {
                            this.$message.error(msg);
                            this.changeImgCode();
                        });
                    }
                });
            },
            getResourceList() {
                this.$api.systemManage.getResourceList({type: 'MENU'}).then((res) => {
                    const {data} = res;
                    let arr = [];
                    let authPathListArr = [];
                    if (data && data.resourceList && data.resourceList.length > 0) {
                        this.menu.forEach(item => {
                            data.resourceList.forEach(itemInner => {
                                if ((itemInner.parentId && itemInner.parentId !== 0 && item.path === itemInner.path) || (item.path === '/home' && item.path === itemInner.path)) {
                                    arr.push(item)
                                }
                                if(item.path === itemInner.path) {
                                    authPathListArr.push(item)
                                }
                            })
                        });
                        this.$storage.set('authPathList',authPathListArr);
                        setTimeout( () => {
                            this.$router.push(arr[0].url);
                        },100)
                    }
                });
            },
            filterMenu(data) {
                data.forEach(item => {
                    if (item.submenu) {
                        this.filterMenu(item.submenu);
                    }
                    else {
                        this.menu.push(item)
                    }
                });
            },
            switchLanguage(language) {
                this.$storage.setLocal('language',language);
                setTimeout( () => {
                    window.location.reload()
                },100)
            },
            changeImgCode() {
              this.form.codekey = new Date().getTime();
              this.imageCodeUrl = apiConf.baseUrl + '/authority/standard-authority/user/imagecode?codekey=' + this.form.codekey;
            }
        },
        mounted() {
            this.filterMenu(menuData.menu);
        },
        created() {
            this.changeImgCode();
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .login {
        background-color: #171818;
        height: 100%;
        position: relative;
        min-height: 900px;
        .login_panel {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url("~@/assets/img/login_bg.png") no-repeat center;
            height: 900px;
            width: 100%;
            min-width: 1200px;
        }
    }

    .login_form {
        width: 320px;
        position: absolute;
        top: 186px;
        left: 50%;
        transform: translateX(-50%);
    }

    .login_logo {
        padding: 6px;
    }

    .login_title {
        color: $primary;
        font-size: 28px;
        line-height: 40px;
        margin-bottom: 24px;
    }

    .login_btn {
        width: 100%;
        margin-top: 12px;
    }

    .login_account_icon, .login_password_icon {
        background: url("~@/assets/img/login_account.png") no-repeat center 16px;
        background-position: center;
        height: 100%;
        width: 25px;
        display: inline-block;
    }

    .login_password_icon {
        background-image: url("~@/assets/img/login_password.png");
    }
    .language-switch {
        padding:0 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
            color: #47c5b2;
            cursor: pointer;
        }
        .current {
            color: #fff;
        }
    }
    .imageCode {
      cursor: pointer;
      border-radius: 4px;
    }
</style>
